<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人页面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/css/reset.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/common.js"></script>
		<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css"/>
		<script src="/js/plugins/jrender/jrender.js"></script>
		<script src="/js/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="/css/reset.css">
		<link rel="stylesheet" href="/css/userProfiles.css">
		<link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
		<script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
		<script src="/js/plugins/dialog/dialog.min.js"></script>
		<script src="/js/common.js"></script>
	</head>
	<body>
		<div class="container bg" >
			<a href="javascript:window.history.go(-1)" class="my-arrow">
				<span><i class="fa fa-chevron-left fa-2x"></i></span>
			</a>
			<div class="container">
				<div class="info">
					<img class="rounded-circle" width="17%" render-src="headImgUrl">
					<p class="name" render-html="nickName">奋斗的小蜜蜂</p>
					<p render-html="sign">一直奋斗的小蜜蜂</p>

					<div class="row num">
						<div class="col-2 border border-left-0 border-top-0 border-bottom-0">
							<div>
								<span class="attentionNumber" ></span>
							</div>
							<div>
								<span>关注</span>
							</div>
						</div>
						<div class="col-2">
							<div>
								<span></span>
									</div>
							<div>
								<span>粉丝</span>
							</div>
						</div>
						<div class="col">
							<button render-value="id" type="button" class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
							<button  render-value="id" class="btn btn-success ibtn" id="followBtn">关注</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="tabs">
			<ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
				<li class="nav-item">
					<a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
						TA的游记[<span>1</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
						TA的点评[<span>1</span>]
					</a>
				</li>
				<!--<li class="nav-item">
					<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
						TA的旅行单[<span>0</span>]
					</a>
				</li>-->
			</ul>
			<div class="container tab-content" id="pills-tabContent">
				<div class="tab-pane fade show active" id="travels">
						
						<dl class="list" render-loop="list">
							<dd>
								<a render-key="list.id" render-fun="handle" data-id="2">
									<img  render-src="list.coverUrl" >
									<p><span render-html="list.title" class="title" >入住长隆熊猫酒店，天天都是儿童节</span>
						 				<!--<span >0</span> <i class="fa fa-thumbs-o-up"></i></span>-->
									</p>
								</a>
								<hr>
							</dd>
						</dl>
				</div>

				<div class="comment tab-pane fade " id="comments">
					<input type="hidden" name="currentPage" value="1">
					<input type="hidden" name="pageSize" value="5">
					<input type="hidden" name="rows" value="1">
					<div render-loop="list">
						<div class="row">
							<div class="col-2 comment-head">
								<img  class="rounded-circle" render-src="list.user.headImgUrl">
							</div>
							<div class="col">
								<span class="comment-star" render-key="list.star" render-fun="handleStar"></span>
								<span class="comment-date" render-html="list.lastCommentTime">2018-07-11</span>
								<div class="comment-content">
									<a render-key="list.id" render-fun="handle" data-id="4">
										<p render-html="list.content">骑了个单车到沙面，春风把从上下九和宝华路带来的燥热吹散。沙面临江，下午的时光让这富有异国风情的公园显得更加宁静惬意，哪怕...</p>
									</a>
								</div>
								<ul class="comment-img" render-loop="list.imgs">
									<li>
										<img render-src="list.imgs.url">
									</li>
								</ul>

								<div class="comment-link">
									<a  render-key="list.stratagy.id" render-fun="handStrategy" data-id="2">
										<img  render-src="list.stratagy.coverUrl"> <span render-html="list.stratagy.title"></span>
										<i class="fa fa-angle-right fa-2x"></i>
									</a>
								</div>

							</div>
						</div>
					</div>

				</div>
				<div class="tab-pane fade" id="pills-contact">.3333..</div>
			</div>
		</div>


		<script>
            $(function () {
                var state=false;
                var userId=getParams().id;
                //回显当前关注人数
				$.get("/users/attentionNumber",function (data) {
					$(".attentionNumber").html(data.number)
                });
                //回显当前粉丝人数
                $.get("/users/fansNumber",function (data) {
                    $(".attentionNumber").html(data.number)
                });
                //回显当前关注状态
                $.get("/users/attentionState",{attentionId:userId},function (data) {
                    state=data.success;
                    if (state) {
                        $("#followBtn").css("background-color","#9d9d9d");
                    }
                });
                //关注当前好友
                $("#followBtn").click(function () {
                    if (state) {
                        $(this).css("background-color","");
                        state=false;
                    }else{
                        $(this).css("background-color","#9d9d9d");
                        state=true;
                    }
                    var attentionId=$(this).val();
                    $.post("/users/attention",{attentionId:attentionId},function (data) {
                        $(document).dialog({
                            type : "notice",
                            infoText: data.obj,
                            autoClose: 1500,
                            position: "bottom"
                        });
                    })




                })
                //点击私信
				$("#letterBtn").click(function () {
					location.href="chat.html?id="+$(this).val();
                })
                //用户数据回显
                $.get("/users/message",{id:userId},function (data){
                    $(".bg").css("background-image","url("+data.coverImgUrl+")");
                    $(".container").renderValues(data);

                });
                //用户游记数据回显
				$.get("/travels/userTravels",{authorId:userId},function (data) {
                    $("#travels").renderValues(data, {
                        handle: function (ele, val) {
                            ele.href = "/travelContent.html?id="+val;
                        }
						
                    });
                })
				//发送ajax请求获取当前攻略的评论
                $.get("/comments", {userId: userId}, function (data) {
                    console.log(data);
                    $("#comments").renderValues(data, {
                        handle: function (ele, val) {
                            ele.href = "/comment/strategyComment.html?id=" + val;
                        },
                        handleStar: function (ele, val) {
                            var num = val;
                            for (var i=0;i<num;i++){
                                $("<i></i>").addClass("fa-star").addClass("fa").appendTo($(ele));
                            }
                            for (var i=0;i<5-num;i++){
                                $("<i></i>").addClass("fa-star-o").addClass("fa").appendTo($(ele));
                            }
                        },
						handStrategy:function (ele, val) {
                            ele.href = "/strategyCatalogs.html?id=" + val;
                        },
                    });

                });
				
            })
		</script>
</body>
</html>